Review: Apply visual design principles to project mockups 複習:把視覺設計原則用到專案 Mockup
四個關鍵視覺設計原則回顧
1 強調(Emphasis)
目的:突出使用者最需要注意的元素,增強視覺權重。示例:將“你可能喜歡的披薩”區域放進一個帶陰影的框中,並新增圖片,幫助使用者理解資訊歸屬並引導點選。
2 層級結構(Hierarchy)
目的:引導使用者的視覺流向,優先處理重要資訊。
示例:將“等待時間”和“佇列中披薩數量”用更大字型展示,同時調整佈局順序以更易識別。
3 比例與尺度(Scale & Proportion)
目的:幫助使用者理解元素之間的相似與差異,提高可讀性。
示例:之前設計中的紅色按鈕過大、文字太小,比例不協調。最佳化後,將字型放大使其與按鈕形成視覺平衡。
4 一致與多樣(Unity & Variety)
目的:提升整體設計的連貫性,同時用變化打破單調。
示例:保留了原先色彩多樣性帶來的資訊引導效果,並使用一致的色彩系統確保整體統一。

應用建議:改進你的作品集 mockups
你可以這樣操作:
- 逐個審視頁面,找出最需要改進的 2 處設計。
- 針對這兩個地方,嘗試應用不同的設計原則(比如調整字號、增加圖片、最佳化對齊、統一顏色等)。
- 確保你在所有 mockup 頁面中都至少用到這四個原則一次。
- 設計不是一蹴而就的,不斷迭代、獲取反饋是關鍵。
自檢清單:我的設計是否...?
| 檢查點 | 對應原則 |
|---|---|
| 有明顯的主視覺?最關鍵的資訊是否突出? | Emphasis |
| 使用者是否能第一時間看到重要資訊?視覺流程是否自然? | Hierarchy |
| 元素大小是否協調?文字是否清晰易讀? | Scale & Proportion |
| 整體風格是否統一?是否也有適當的變化來吸引眼球? | Unity & Variety |
靈感參考建議:
- 開啟你喜歡的 app(如 Spotify、Google Maps、Instagram),觀察其如何透過顏色、字號、排版來強調重要資訊。
- 模仿不是抄襲,而是練習設計語言。
